<template>
  <q-btn :dense="isDense" fab-mini flat icon="translate" round>
    <q-tooltip v-bind="$tooltipAttr">{{ $t('Language') }}</q-tooltip>
    <q-popup-proxy :offset="[0, 5]" anchor="bottom left" breakpoint="0" self="top middle" transition-hide="jump-up"
                   transition-show="jump-down">
      <q-item v-for="(lang, key) in i18nPackage" :key="key" v-close-popup :active="sysSetting.locale === key" clickable>
        <q-item-section @click="toggleLang(key)">{{ lang.nativeName }}</q-item-section>
      </q-item>
    </q-popup-proxy>
  </q-btn>
</template>

<script setup>
import { inject } from 'vue'
import { useSysSettingStore } from 'stores/system-setting'
import { i18nPackage, toggleLanguage } from 'boot/i18n'

const sysSetting = useSysSettingStore()
const handleReload = inject('handleReload')
const isDense = inject('isDense', true)

const toggleLang = language => {
  if (language === sysSetting.locale) return
  toggleLanguage(language)
  sysSetting.setLocale(language)
  handleReload && handleReload()
}
</script>